<template>
  <!-- 新增房管弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    style="width: 480px; padding: 0; border-radius: 9px"
    :before-close="close"
    align-center
  >
    <template #header>
      <div style="font-size: 16px; padding: 12px 32px">新增房管</div>
    </template>
    <template #default>
      <div class="form-box">
        <span class="text">用户</span>
        <el-select v-model="value" placeholder="请选择" size="large" style="width: 240px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="flex-x-end">
        <el-button
          type="primary"
          style="
            width: 84px;
            height: 38px;
            color: #86909c;
            background-color: #f2f3f5;
            border: none;
            border-radius: 2px;
          "
          @click="close"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          style="
            width: 84px;
            height: 38px;
            background-color: #3c80ff;
            border-radius: 2px;
            box-shadow: 0px 2px 2px 0px rgba(22, 93, 255, 0.6);
          "
          class="m-r-30"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "AddManager",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);

const show = () => {
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

defineExpose({
  show,
  close,
});

//新增房管
const value = ref("");
const options = [
  {
    value: "1",
    label: "选项一",
  },
  {
    value: "2",
    label: "选项二",
  },
  {
    value: "3",
    label: "选项三",
  },
];
</script>

<style lang="scss" scoped>
.form-box {
  padding: 20px 32px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  .text {
    margin-right: 20px;
  }
}
.flex-x-end {
  border-top: 1px solid #f5f5f5;
  padding: 12px 0;
}
::v-deep .el-select__wrapper {
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  // box-shadow: none !important;
  // border: none !important;
  // background: #8e4646;
  // border-radius: 0px;
  // height: 38px;
}
</style>
